<script setup lang="ts">
import SelectedView from "./SelectedView.vue";
import FreeView from "./FreeView.vue";
import BoyView from "./BoyView.vue";
import GirlView from "./GirlView.vue";
import PublishView from "./PublishView.vue";
import ListenBooksView from "./ListenBooksView.vue";
import { ref, onMounted } from "vue";
import axios from "axios";
// import { nextTick } from 'process'
// export default {
// data() {
//   return {
// setup() {
const active = ref(0);
const sexNum = ref(1);
const selectedUrl = ref(
  "/store/show.json?type=recommend&uuid=f2cb32ff209f4010911a77a617add8c4"
);
const boxBu = ref(false);
const womanBu = ref(false);
const wBu = ref(false);
const manBu = ref(false);
const mBu = ref(true);
const bgShow = ref(false);
const freeUrl = ref(
  "/store/show.json?type=free&uuid=ea81f0be96a74d4fa7c674b9252a9ef4"
);
const boyUrl = ref(
  "/store/show.json?type=male&uuid=ca03da7b64ca443ab25ec3b662fa91e2"
);
const girlUrl = ref(
  "/store/show.json?type=femail&uuid=017de2274aa5400e9dabe30f173e98d9"
);
const publishUrl = ref(
  "/store/show.json?type=publish&uuid=b5648dd3c4f24d9796f590cd81ca076e"
);
const listenBooksUrl = ref(
  "/store/show.json?type=audio&uuid=b67282bb443845fabe5b543795a27618"
);
//   };
// },

const child = ref();
const free = ref();

// methods: {
const replaceSex = () => {
  if (sexNum.value == 2) {
    mBu.value = false;
    wBu.value = true;
    sexNum.value = 1;

    axios
      .get(
        `https://apis.netstart.cn/yunyuedu/store/navi.json?gender=${sexNum.value}`
      )
      .then(({ data: { data } }) => {
        // 精选页面的url
        selectedUrl.value = data.navi[0].url;
        freeUrl.value = data.navi[1].url;
        boyUrl.value = data.navi[2].url;
        girlUrl.value = data.navi[3].url;
        publishUrl.value = data.navi[4].url;
        listenBooksUrl.value = data.navi[5].url;
        // console.log(listenBooksUrl,'女');
      });
  } else if (sexNum.value == 1) {
    mBu.value = true;
    wBu.value = false;
    sexNum.value = 2;

    axios
      .get(
        `https://apis.netstart.cn/yunyuedu/store/navi.json?gender=${sexNum.value}`
      )
      .then(({ data: { data } }) => {
        // 精选页面的url
        selectedUrl.value = data.navi[0].url;
        freeUrl.value = data.navi[1].url;
        boyUrl.value = data.navi[2].url;
        girlUrl.value = data.navi[3].url;
        publishUrl.value = data.navi[4].url;
        listenBooksUrl.value = data.navi[5].url;
      });
  }

  // const child = ref();
  child.value.getData();

  free.value.getData();

  toSex();
};

const toSex = () => {
  boxBu.value = true;
  bgShow.value = true;
  if (sexNum.value == 1) {
    womanBu.value = true;
    setTimeout(() => {
      womanBu.value = false;
      boxBu.value = false;
      bgShow.value = false;
    }, 1000);
  } else if (sexNum.value == 2) {
    manBu.value = true;
    setTimeout(() => {
      manBu.value = false;
      boxBu.value = false;
      bgShow.value = false;
    }, 1000);
  }
};

const render = () => {
  mBu.value = true;
  wBu.value = false;
  sexNum.value = 1;
  axios
    .get(
      `https://apis.netstart.cn/yunyuedu/store/navi.json?gender=${sexNum.value}`
    )
    .then(({ data: { data } }) => {
      // 精选页面的url
      selectedUrl.value = data.navi[0].url;
      freeUrl.value = data.navi[1].url;
      boyUrl.value = data.navi[2].url;
      girlUrl.value = data.navi[3].url;
      publishUrl.value = data.navi[4].url;
      listenBooksUrl.value = data.navi[5].url;
      // console.log(this.listenBooksUrl,'女');
      console.log(selectedUrl.value);

    });
};

onMounted(() => {
  render();
});

// },

// },
// };
</script>
<template>
  <div id="top">
    <div class="top-one">
      <div class="gender" @click="replaceSex">
        <img src="@/assets/male.png" v-show="mBu" />
        <img src="@/assets/female.png" v-show="wBu" />
        <van-overlay :show="bgShow" />
      </div>
      <div class="search" @click="$router.push('/search')">
        <p style="
            width: 50vw;
            height: 35px;
            border-radius: 999px;
            margin-left: 20px;
            line-height: 7px;
            color: #ccc;
          ">
          唐诗里的烟火人间
        </p>
        <van-icon name="search" />
      </div>
    </div>

    <div class="box" v-show="boxBu">
      <img src="@/assets/gender_to_woman.gif" v-show="womanBu" />
      <img src="@/assets/gender_to_man.gif" v-show="manBu" />
    </div>

    <van-tabs v-model="active" sticky animated line-width="20px" line-height="2px">
      <van-tab title="精选">
        <SelectedView :selectedUrl="selectedUrl" ref="child" />
      </van-tab>
      <van-tab title="免费">
        <FreeView :freeUrl="freeUrl" :sexNum="sexNum" ref="free" />
      </van-tab>
      <van-tab title="男生">
        <BoyView :boyUrl="boyUrl" ref="boy" />
      </van-tab>
      <van-tab title="女生">
        <GirlView :girlUrl="girlUrl" ref="girl" />
      </van-tab>
      <van-tab title="出版">
        <PublishView :publishUrl="publishUrl" ref="publish" />
      </van-tab>
      <van-tab title="听书">
        <ListenBooksView :listenBooksUrl="listenBooksUrl" ref="listen" />
      </van-tab>
    </van-tabs>
    <div class="foot">
      <p>我是有底线哒╮(￣▽￣")╭</p>
    </div>
    <div class="dianzi"></div>
  </div>
</template>


<style lang="scss" scoped>
.van-tab--active {
  font-size: 20px;
  font-weight: bolder;
}

#top {
  position: relative;

  .box {
    position: absolute;
    background-color: #fff;
    z-index: 999;
    width: 50%;
    top: 25vh;
    left: 25%;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.top-one {
  display: flex;
}

.gender {
  width: 35px;
  height: 35px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 2px 2px 10px rgba(135, 132, 132, 0.4);
  margin: 10px;
  margin-top: 15px;

  img {
    width: 20px;
    height: 20px;
    margin: 7px;
  }
}

.search {
  width: 80vw;
  height: 35px;
  border-radius: 999px;
  box-shadow: 1px 1px 8px rgba(135, 132, 132, 0.4);
  margin-top: 15px;
  margin-left: 5px;
  display: flex;
  justify-content: space-between;

  .van-icon-search:before {
    content: "\e710";
    margin: 10px;
  }
}

.foot {
  width: 100vw;
  height: 50px;
  background-color: #eee;
  text-align: center;
  line-height: 50px;

  p {
    font-size: 14px;
  }
}
</style>